<template>
    <div>
        <div class="container">
            <div class="row">
                <div :class="key.clas" v-for="(key,val) in left" :key="val">
                    <div>
                        <div :class="key.cla">
                            <img :src="key.img" alt="" width="100%">
                            <div class="more"><a>了解更多</a></div>
                            <p>{{key.txt}}</p>
                        </div>
                    </div>
                    <div>
                        <div :class="key.cls">
                            <img :src="key.image" alt="" width="100%">
                            <div class="more"><a>了解更多</a></div>
                            <p>{{key.tet}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <nav aria-label="Page navigation example">
                <ul class="pagination ull">
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
    export default {
        name: "blog",
        data(){
            return {
                left:[]
            }
        },
        mounted(){
            this.$axios('http://localhost:3000/blog').then((data)=>{
            console.log(data);
            this.left=JSON.parse(data.data[0].left);
            })
        }
    }
</script>

<style scoped>
    .col-lg-4{padding: 0;}
    .row{margin: 0;}
    .breadcrumb{margin-bottom: 4.5rem;}
    a{text-decoration: none}
    .first,.second{border: 1px solid #eaeaea;margin-bottom: 1.5rem;}
    .first p{padding: 1rem;}.second p{padding: 1rem;}
    .one{padding-right: 1.4rem;}.two{padding: 0 0.7rem;}.three{padding-left: 1.4rem;}
    .more{position: relative;margin-bottom: 0.5rem;}
    .more a{position: absolute;
        top: -1.1rem;
        background-color: rgb(255 106 163);
        padding: 0.4rem 1.1rem;
        color: #FFF;}
    .ull{margin: 1.5rem 0 3rem;}
</style>